<template>
  <div class="main">
    <div class="header">
      <div class="area fx-r fx-bc">
        <div class="greeting fx-g1">管理系统登录</div>
      </div>
    </div>

    <!--中间部分-->
    <!--登录部分-->
    <div id="showcaseBox">
      <div class="loginbox">
        <h1>账号登录</h1>
        <Form
          ref="formInline"
          @keyup.enter="handleSubmit('formInline')"
          :model="formInline"
          :rules="ruleInline"
          class="login-form"
        >
          <FormItem prop="username">
            <Input
              type="text"
              prefix="ios-contact-outline"
              v-model="formInline.username"
              placeholder="请输入用户名"
              size="large"
            />
          </FormItem>
          <FormItem prop="password">
            <Input
              type="password"
              v-model="formInline.password"
              prefix="ios-lock-outline"
              placeholder="请输入密码"
              size="large"
            />
          </FormItem>

          <FormItem prop="code">
            <div class="code fx-r fx-bc">
              <Input
                type="text"
                style="width: 150px"
                v-model="formInline.code"
                prefix="ios-keypad-outline"
                placeholder="请输入验证码"
                size="large"
              />
              <img :src="verifyImg" class="pictrue" @click="tapCaptchas" />
            </div>
          </FormItem>

          <FormItem>
            <Button
              v-if="!isLogin"
              type="primary"
              long
              size="large"
              @click="handleSubmit('formInline')"
              class="btn"
            >
              登录系统
            </Button>
            <Button v-if="isLogin" type="primary" long size="large" class="btn">
              <div class="fr-x">
                <Icon type="ios-sync" class="loadingImg" />登录中..
              </div>
            </Button>
          </FormItem>
        </Form>
      </div>

      <div class="bannerBox">
        <div class="vsite-name">{{ globalSite.seo_title }}</div>
      </div>
    </div>

    <div class="bottom">
      <div class="area info">
        <p>
          2023-2024 © Copyright. {{ globalSite.seo_title }} Network - All Rights
          Reserved.
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import Setting from '../../../setting'
import { SystemLogin, addUserLogin } from '../../../api/system/login'
import util from '@/libs/util'
import { mapState, mapMutations } from 'vuex'
//globalSite
export default {
  name: 'systemLoginIndex',
  computed: {
    ...mapState('system/page', ['globalSite']),
    ...mapState('pub/page', ['visitorId']),
  },
  data() {
    return {
      verifyImg: '',
      isLogin: false,
      formInline: {
        username: '',
        password: '',
        code: '',
      },
      ruleInline: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码' },
          { min: 8, message: '密码长度大于8个字符', trigger: 'blur' },
          {
            pattern:
              /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[`~!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,}$/,
            message: '密码必须包含大小写字母、数字和至少一个特殊符号',
            trigger: 'blur',
          },
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
      },
      sass: {
        logo: require('@/assets/system/img/logo.png'),
        title: '',
        custom_tel: '',
        custom_qq: '',
        record_code: '浙ICP备20012147号-2',
      },
    }
  },

  created() {
    var _this = this
    document.onkeydown = function (e) {
      let key = window.event.keyCode
      if (key === 13) {
        _this.handleSubmit('formInline')
      }
    }
    this.tapCaptchas()
  },
  methods: {
    /**
     * 验证码
     */
    tapCaptchas: function () {
      this.verifyImg =
        Setting.apiBaseURL +
        '/systemv1/login/captcha?visitorId=' +
        this.visitorId +
        '&_t=' +
        this.$utils.strtotime()
    },

    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.errorNum >= 2) {
            this.modals = true
          } else {
            this.tapLogin()
          }
        }
      })
    },
    /**
     * 用户登录
     */
    async tapLogin() {
      if (this.isLogin) return
      this.isLogin = true
      const name = this.formInline.username
      const psd = btoa(this.formInline.password)

      SystemLogin({
        username: this.formInline.username,
        password: this.formInline.password,
        captcha: this.formInline.code,
      })
        .then(async (res) => {
          this.isLogin = false
          if (res.code == 200) {
            const res2 = await addUserLogin({
              id: res.data.user_info.id,
              username: name,
              password: psd,
            })
            localStorage.setItem('nanxun_zhifa_id', res.data.user_info.id)
            let expires = this.getExpiresTime(res.data.expires_time)
            // 记录用户登陆信息
            util.cookies.set('system_uuid', res.data.user_info.id, {
              expires: expires,
            })
            //用户token
            util.cookies.set('system_token', res.data.token, {
              expires: expires,
            })
            //过期时间
            util.cookies.set('system_expires_time', res.data.expires_time, {
              expires: expires,
            })

            this.$store.dispatch('system/menu/set', res.data.menus)
            this.$store.dispatch('system/user/set', res.data.user_info)
            this.$store.dispatch('system/user/setpaths', res.data.paths)
            this.$router.replace({
              path: '/system/index',
              query: {
                id: res2.data.id,
              },
            })
          } else {
            this.tapCaptchas()
            this.$Message.error(res.msg || '登录失败')
          }
        })
        .catch((err) => {
          let data = err === undefined ? {} : err
          this.isLogin = false
          this.tapCaptchas()
        })
    },
    getExpiresTime(expiresTime) {
      let nowTimeNum = Math.round(new Date() / 1000)
      let expiresTimeNum = expiresTime - nowTimeNum
      return parseFloat(parseFloat(parseFloat(expiresTimeNum / 60) / 60) / 24)
    },
  },
}
</script>
<style scoped>
.header {
  width: 100%;
  height: 94px;
  margin: 0 auto;
  padding: 20px 0;
  background: #fff;
}
@media screen and (min-width: 1200px) {
  .area {
    width: 1200px;
    margin: 0 auto;
  }
  #showcaseBox {
    width: 100%;
    min-width: 1200px;
  }
  .loginbox {
    margin-left: 240px;
  }
}
@media screen and (max-width: 1200px) {
  .area {
    width: 1000px;
    margin: 0 auto;
  }
  #showcaseBox {
    width: 100%;
    min-width: 1000px;
  }
  .loginbox {
    margin-left: 140px;
  }
}
.img-logo img {
  height: 80px;
}
.header .greeting {
  height: 30px;
  margin: 0px 20px 0;
  line-height: 30px;
  color: #666;
  font-size: 24px;
  text-align: left;
}
.header .menu {
  height: 30px;
  margin: 0px 10px 0;
  line-height: 30px;
  color: #999;
  font-size: 14px;
  text-align: left;
}
.header .menu a {
  color: #999;
}
.bannerBox {
  width: 100%;
  min-width: 1200px;
  height: 560px;
  position: relative;
  background: url('../../../assets/system/img/20190610logo1.png') center top
    no-repeat rgb(51, 127, 254);
}
#showcaseBox {
  height: 560px;
  position: relative;
  text-align: center;
  overflow: hidden;
}
.loginbox {
  width: 320px;
  height: 380px;
  float: left;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -200px;
  background: #fff;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 55;
}
.loginbox h1 {
  width: 100%;
  height: 60px;
  float: left;
  border-bottom: 1px solid #ddd;
  color: #8b949b;
  font-size: 20px;
  font-weight: normal;
  line-height: 60px;
}

.loginbox .submit {
  width: 280px;
  height: 40px;
  margin: 20px 20px 0;
  float: left;
  background: #19a3d1;
  color: #fff;
  text-align: center;
  font-size: 20px;
  line-height: 40px;
  font-weight: normal;
  border-radius: 2px;
  cursor: pointer;
}
.loginbox .submit:hover {
  background: #09c;
}
.loginbox .submit:active {
  background: #08c;
}

.bottom {
  width: 100%;
  margin: 0 auto;
  padding: 20px 0;
  clear: both;
  background: #fff;
}
.bottom a {
  text-decoration: none;
}
.bottom .info {
  padding: 5px 0;
  text-align: center;
  font-size: 14px;
  color: #999;
  line-height: 24px;
}
.bottom .info a {
  color: #777;
}
.bottom .info a:hover {
  color: #333;
  text-decoration: underline;
}
.bottom {
  opacity: 0.6;
  transition: opacity 0.5s ease;
}
.bottom:hover {
  opacity: 1;
}
.verify-empty {
  height: 35px;
  width: 100px;
  color: #ccc;
  line-height: 35px;
  text-align: center;
}

.login-form {
  padding: 20px;
  margin-top: 60px;
}
.code .pictrue {
  height: 30px;
  cursor: pointer;
}
.vsite-name {
  position: absolute;
  font-size: 40px;
  width: 500px;
  color: #fff;
  left: 20px;
  text-align: right;
  top: 100px;
}
</style>
